<template>
  <h3>toRaw, markRaw 函数的演示(打开日志查看输出)</h3>

  <hr>
  <div style="margin-bottom: 8px;"><b>toRaw</b>+<b>reactive</b> 演示</div>
  <button @click="book.name += '@'">修改书名</button>
  <button @click="book.price++">书本价格加一</button>
  <button @click="book.category.sect += '**'">修改流派</button>
  <div>书本全部信息: {{book}}</div>
  <button @click="chgRawBook">修改toRaw(book) - 日志看结果应是原始对象</button>

  <hr>
  <div style="margin-bottom: 8px;"><b>toRaw</b>+<b>ref</b> 基本数据类型演示</div>
  <button @click="count++">计数加一</button>
  <div>当前计数 ( 基本数据类型 ): {{count}}</div>
  <button @click="toRawCount++">toRaw(count)加一</button>
  <div>当前计数 ( toRaw(count) ): {{toRawCount}} -- toRaw 对 ref 处理过的数据不起作用!</div>
  
  <hr>
  <div>个人信息 (<b>markRaw</b> 对象演示):</div>
  <div class="single">姓名: {{name}}</div>
  <div class="single">年龄: {{age}}</div>
  <div class="single">薪水: {{job.job1.salary}}K</div>
  <div v-show="person.car" class="single">座驾: {{person.car}}</div>
  <div>所有信息: {{person}}</div>

  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">修改年龄</button>
  <button @click="job.job1.salary++">涨薪</button>
  <br>
  <button v-show="!person.car" @click="addCar">增加座驾</button>
  <button v-show="person.car" @click="person.car.name += '%'">修改座驾名</button>
  <button v-show="person.car" @click="person.car.price++">修改座驾价格</button>
  <button v-show="person.car" @click="printCar">显示修改了的数据</button>

  <hr>
  <p>
    注意:<br>
    1. toRaw: 返回 reactive 或 readonly 代理的原始对象, 可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改.<br>
    2. markRaw: 标记一个对象，使其永远不会转换为 proxy。返回对象本身。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;1). 有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。<br>
    &nbsp;&nbsp;&nbsp;&nbsp;2). 当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。<br>
    3. 详情可参考官方文档:
      <a href="https://v3.cn.vuejs.org/api/basic-reactivity.html#toraw">toRaw</a>&nbsp;,&nbsp;
      <a href="https://v3.cn.vuejs.org/api/basic-reactivity.html#markraw">markRaw</a>
  </p>
</template>

<script>
import { markRaw, reactive, ref, toRaw, toRefs } from 'vue'

export default {
  setup() {
    let book = reactive({
      name: 'World war II',
      price: 99,
      category:{
        sect: 'New Classic'
      }
    })
    let toRawBook = toRaw(book)

    function chgRawBook() {
      toRawBook.price++
      console.log('toRaw(book): ', toRawBook)
    }

    let count = ref(0)
    let toRawCount = toRaw(count)

    let person = reactive({
      name: '张三',
      age: 33,
      job: {
        job1: {
          salary: 22
        }
      },
    })

    function addCar() {
      let car = {name: '红旗III', price: 38}
      person.car = markRaw(car)
    }

    function printCar(){
      person.age++
      person.age-- //会附带刷新car
      console.log(person.car)
    }

    console.log('toRaw(book): ', toRawBook)
    console.log('toRaw(count): ', toRawCount)

    //expose 
    return {
      book,
      chgRawBook,
      count,
      toRawCount,
      person,
      ...toRefs(person),
      addCar,
      printCar
    }
  },
}
</script>

<style scoped>

h3 {
  text-align: center;
}

button {
  margin-left: 5px;
}

.single {
  margin-top: 5px;
}

</style>